<template>
  <div>
    <div class="top">
        <span @click="fun()" style="font-size:.14rem">💜返回</span>
        <p>热门</p>
        <h1>···</h1>
      </div>
      <div class="sort">
        <div v-for="(v,i) in newarr.hot" :key="i"  @click="fun1(v.id)">
         <div>
            <h1>{{v.id}}</h1>
          <img :src="v.imgUrl1">
          <img :src="v.imgUrl2">
         </div>
         <p>{{v.text}}</p>
         <img :src="v.imgUrl3">
        </div>
      </div>
  
  </div>
</template>

<script>
export default {
methods: {
 
  fun(){
    this.$router.push("./index")
  },

fun1(id){
            console.log(id);
            this.$router.push({name:"xiangqing",params:{id:id}})
        }

},
mounted() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxiosc");
  },
  // 12.读取state的数据
  computed: {
    newarr(){
      //  console.log(this.$store.state.aboutm.arr.stop)

    return this.$store.state.hotm.arr
    
   
  }
  },
}
</script>

<style scoped>
.top{
  display: flex;
  height: .4rem;
  width: 100%;
  background-color: white;
  line-height: .4rem;
  position: relative;
  border-bottom: .005rem solid gray;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}
.sort{
  margin-top: .5rem;
}
.sort>div>div{
  margin-top: .2rem;
}
.sort>div>div{
  display: flex;
  position: relative;
  
  
}
.sort>div>div>h1{
  font-size: .25rem;
  font-weight: 600;
  color: #ff5959;
  
}
.sort>div>div>img:nth-of-type(1){
width: .8rem;
height: .34rem;
margin-left: .2rem;
}
.sort>div>div>img:nth-of-type(2){
  position: absolute;
  right: .15rem;
  width: .89rem;
height: .345rem;
}
.sort>div{
  width: 95%;
  margin-left: .15rem;
  padding-bottom: .1rem;
  border-bottom: .005rem solid gray;
}
.sort>div>p{
  font-size: .2rem;
  font-weight: 600;
}
.sort>div>img{
  width: 100%;
  height: 1.215rem;
  margin-top: .15rem;
  
}
</style>